<template>
  <xy-page>
    <div class="account">
      账号修改
      <div class="clearfix">
        <el-form :model="formData" status-icon class="account-table" ref="formData" :rules="rules">
          <el-form-item label="账号邮箱" label-width="80px">
            <el-input v-model="formData.email" class="w300" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="用户名" label-width="80px">
            <el-input v-model="formData.user" class="w300" maxlength="20"></el-input>
          </el-form-item>
          <el-form-item label="修改密码" prop="oldpwd" label-width="80px">
            <el-input v-model="formData.oldpwd" class="w300" placeholder="输入原密码" type="password"></el-input>
          </el-form-item>
          <el-form-item label prop="newpwd" label-width="80px">
            <el-input
              v-model="formData.newpwd"
              class="w300"
              placeholder="新密码(5~16位，英文数字下划线)"
              type="password"
              minlength="5"
              maxlength="16"
            ></el-input>
          </el-form-item>
          <el-form-item label prop="newpwd2" label-width="80px">
            <el-input v-model="formData.newpwd2" class="w300" placeholder="再次输入新密码" type="password"></el-input>
          </el-form-item>
          <div class="txtC">
            <el-button class="w100" @click="sumbitForm('formData')" type="primary">保存</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </xy-page>
</template>

<script>
import userModel from "@M/user";
export default {
  data() {
    let validateOldPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入原密码"));
      } else {
        callback();
      }
    };
    let validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (!this.$utils.identifyPwd(value)) {
          callback(new Error("密码长度5~16位，英文数字下划线"));
        }
        callback();
      }
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.formData.newpwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      userInfo: "",
      formData: {
        email: "",
        user: "",
        userName: "",
        oldpwd: "",
        newpwd: "",
        newpwd2: ""
      },
      rules: {
        oldpwd: [{ validator: validateOldPass, trigger: "blur" }],
        newpwd: [{ validator: validatePass, trigger: "blur" }],
        newpwd2: [{ validator: validatePass2, trigger: "blur" }]
      }
    };
  },
  methods: {
    sumbitForm(formName) {
      if (!this.formData.user) {
        this.$message.error("用户名不能为空");
        return;
      } else if (!this.formData.oldpwd) {
        this.$message.error("原密码不能为空");
        return;
      } else if (!this.formData.newpwd) {
        this.$message.error("请输入新密码");
        return;
      } else if (!this.formData.newpwd2) {
        this.$message.error("请输入确认密码");
        return;
      }
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$postStream("/admin/auth/instance/authApp/renew.do", {
            data: {
              newName: this.formData.user,
              passwd: this.formData.oldpwd,
              newPasswd: this.formData.newpwd
            },
            success: res => {
              if (res.success) {
                this.$message.success("修改成功");
                userModel.logout(() => {
                  // this.$message.success("退出成功");
                  setTimeout(function() {
                    window.location.href = "login.html";
                  }, 1000);
                });
                return;
              } else {
                this.$message.error(res.message);
              }
            },
            error: res => {
              this.$message.error(res.message);
            }
          });
        } else {
          this.$message.error("请检查表单信息");
        }
      });
    }
  },
  mounted() {
    this.formData.email = sessionStorage.getItem('curAccountEmail')
  }
};
</script>

<style lang="scss" scoped>
.account {
  .account-table {
    position: relative;
    width: 380px;
    margin: 50px auto;
  }
}
</style>
